<template>
	<div>
		<popup-picker
			:data="delegateTypes"
			:title="title"
			v-on:change="onChange">
			<img src="~assets/icons/down.png" :class="$style.down" alt="">
		</popup-picker>
	</div>
</template>

<script>
	import PopupPicker from '../../popup-picker'
	const CommonUtil = require('../../../common/common.util')

	export default {

		props: {
			title: {
				type: String,
				default: ''
			}
		},

		components: {
			PopupPicker
		},

		computed: {
			delegateTypes () {
				const market = this.$store.state.buyStockMarket
				if (!market) {
					return [[{ value: '0', name: '限价委托', showText: '限价委托' }]]
				} else {
					const marketCd = market === 'SH' ? '1' : '0'
					const arr = CommonUtil.getTradeTypes('buy', marketCd)
					return [arr.map(tt => ({ value: tt.value, name: tt.text, showText: tt.showText }))]
				}
			}
		},

		methods: {
			onChange (val) {
				this.$store.dispatch('setBuyDelegateType', val)
				const _index = this.delegateTypes[0].findIndex(dt => dt.value == val)
				this.$emit('changeDelegateText', this.delegateTypes[0][_index].showText)
			}
		}
	}
</script>

<style module>
	.down {
		position: absolute;
		right: -20px;
		top: 50%;
		width: 15px;
		margin-top: -7px;
	}
</style>